<template>
	<view class="container">
		<com-head textTit="打赏" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="tag">打赏金额</view>
		<view class="price">¥{{Number(rewardInfo.money).toFixed(2)}}</view>
		
		<!-- 支付方式 -->
		<view class="groupList">
			<view class="item">
				<text>支付方式</text>
			</view>
			<view class="items">
				<view class="select" v-for="(item,i) in payList" :key="item" @click="checkFun(i)">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view class="iconfont left-auto" :class="(payIndex === i) ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong'"></view>
				</view>
			</view>
		</view>
		
		<view class="pay" @click="pay()">支付</view>
		
		<!-- <view class="payment">
			<view class="title">请选择支付方式</view>
			<view class="list" v-for="(ele,index) in payList" :key="index">
				<view class="left">
					<image :src="ele.icon" mode=""></image>
					<text>{{ele.name}}</text>
				</view>
				<view class="iconfont " :class="ele.isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view>
			</view>
			<view class="pay" @click="pay()">支付</view>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				payIndex: 0,
				payList:[{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（门店）',
					id: 1,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（平台）',
					id: 4,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
					id: 2,
				}],
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		methods: {
			// setReward
			checkFun(i) {
				this.payIndex = i
			},
			payFun(data) {
				var pls = data
				let that = this
				uni.requestPayment({
					provider: "wxpay",
					appid: pls.appId,
					timeStamp: pls.timeStamp,
					nonceStr: pls.nonceStr,
					package: pls.package,
					signType: pls.signType,
					paySign: pls.paySign,
					success(res) {
						if (res.errMsg == "requestPayment:ok") {
							that.utlis.backPage()
							that.utlis.Toast("打赏成功","success")
							that.$u.vuex("rewardInfo",{})
						}
					},
					fail(e) {
						if (e.errMsg == "requestPayment:fail cancel") {
							that.toast("充值已取消")
						} else {
							that.toast("充值失败" + e.errMsg)
						}
					},
				});
			},
		  async pay(){
			  this.rewardInfo.type = this.payList[this.payIndex].id
			  uni.login({
				success: async (loginRes) => {
					this.rewardInfo.code = loginRes.code
					let {data,code} = await this.$u.api.setReward(this.rewardInfo);
					if(code){
						if (data.appId) {
							this.payFun(data)
						} else {
							this.utlis.backPage()
							this.utlis.Toast("打赏成功","success")
							this.$u.vuex("rewardInfo",{})
						}
					}
				}
			  })
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 43rpx 0 34rpx;
	.pay{
		width: 670rpx;
		line-height: 100rpx;
		background: linear-gradient(140deg,#50DCC2 0%, #007664);
		border-radius: 48rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		position: fixed;
		bottom: 111rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.groupList{
		width: 100%;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		margin: 0rpx 0 34rpx 0;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			color: #333333;
			font-size: 26rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			position: relative;
			.image{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: relative;
				top: 5rpx;
				margin-right: 19rpx;
			}
			.imgs{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: absolute;
				right: 0;
			}
			.right{
				font-size: 24rpx;
				display: flex;
				align-items: center;
				text{
					margin-right: 32rpx;
				}
			}
		}
		.items{
			// padding: 40rpx 43rpx;
			// padding-top: 28rpx;
			.title{
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 37rpx;
				margin-bottom: 38rpx;
			}
			.select{
				display: flex;
				align-items:center;
				// margin-bottom: 36rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 40rpx;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				padding: 28rpx 0;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
				.iconfont{
					padding: 10rpx 20rpx;
				}
				.icon-a-xingzhuang1{
					color: rgba(209,184,125,1);
				}
				&:last-child{
					border: none;
				}
			}
			.price-box{
				border-top: 1px solid #d8d8d8;
				padding-top: 50rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #666666;
				line-height: 42rpx;
				>text{
					font-size: 30rpx;
					font-weight: 400;
					text-align: left;
					color: #007664;
					line-height: 42rpx;
					text{
						font-size: 20rpx;
						font-weight: 400;
						color: #666666;
						line-height: 42rpx;
					}
				}
				.btn{
					margin-left: auto;
					width: 236rpx;
					height: 70rpx;
					background: #007664;
					border-radius: 6rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.item:last-child{
			border-bottom: 1rpx solid #F6F7FA;
		}
	}
	
	
	.icon-weixuanzhong{
		color: #979797;
		font-size: 34rpx;
	}
	.icon-a-xingzhuang1{
		color: #D1B87D;
		font-size: 34rpx;
	}
	.tag{
		color: #666666;
		font-size: 24rpx;
		text-align: center;
		margin-top: 100rpx;
	}
	.price{
		font-size: 50rpx;
		color: #007664;
		line-height: 70rpx;
		text-align: center;
		padding: 22rpx 0 70rpx 0;
		// border-bottom: 1px solid #D8D8D8;
	}
}
</style>

